<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Object.defineProperty()</title>
</head>

<body>
    <!-- 
        Object.defineProperty()
        1. 这个方法是ES5新增的
        2. 这个方法的作用是：给对象新增属性，或者设置对象原有的属性
        3. 怎么用？
            Object.defineProperty(给哪个对象新增属性, '新增的这个属性叫啥名字',{给新增的属性设置相关的配置项 key:value 对})
        4. 第三个参数是属性相关的配置项，配置项都有哪些？每个配置项的作用是啥？
            value 配置项：给属性指定值
            writable 配置项：设置该属性的值是否可以被修改。true表示可以修改，false表示不能修改。
            getter方法 配置项：不需要我们手动调用的。当读取属性值的时候，getter方法被自动调用
                *getter方法的返回值非常重要，这个返回值就代表这个属性他的值。
            setter方法 配置项：不需要我们手动调用的。当修改属性值的时候，setter方法被自动调用
                *setter方法上有一个参数的，这个参数可以接收传过来的值
            注意：当配置项中有setter和getter的时候，value和writable配置项都不能存在。   
    -->


    <script>
        let phone = {}

        let temp

        Object.defineProperty(phone, 'color', {
            // value: '太空灰',
            // writable: true,
            //getter方法配置项
            get: function () {
                console.log('getter方法执行了');
                // return "张三"
                // return this.color //出现递归死循环
                return temp
            },
            //setter方法配置项
            set: function (val) {
                console.log('setter方法执行了');
                // this.color = color   //出现递归死循环
                temp = val
            }
        })



    </script>
</body>

</html>